<template>
  <div class="form-example">
    <h2>通用表单组件示例</h2>

    <CommonForm
      v-model="formData"
      :config="formConfig"
      :rules="formRules"
      :label-width="120"
      :gutter="20"
      :show-buttons="true"
      :show-submit="true"
      :show-reset="true"
      :show-cancel="true"
      :submit-text="'保存'"
      :reset-text="'重置'"
      :cancel-text="'取消'"
      :submit-loading="submitLoading"
      @submit="handleSubmit"
      @reset="handleReset"
      @cancel="handleCancel"
      @change="handleChange"
    >
      <!-- 自定义插槽示例 -->
      <template #custom-slot="{ formData, item }">
        <div class="custom-slot">
          <span>自定义内容: {{ formData[item.prop] }}</span>
        </div>
      </template>
    </CommonForm>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
definePageMeta({
  title: "测试表单",
  en_title: "test",
  zh_hk_title: "测试表单",
  ssr: true, // 必须为 true
  isTokenCheck: true,
});

// 表单数据
const formData = reactive({
  name: "",
  email: "",
  phone: "",
  age: 18,
  gender: "",
  hobbies: [],
  city: "",
  multiCity: [],
  region: [],
  date: "",
  dateRange: [],
  time: "",
  description: "",
  status: true,
  satisfaction: 50,
  score: 5,
  color: "#409EFF",
  files: [],
  customField: "",
});

// 提交加载状态
const submitLoading = ref(false);

// 表单配置
const formConfig = [
  {
    type: "input", // 类型
    label: "姓名", // label
    prop: "name", // 字段名
    placeholder: "请输入姓名", // 占位符
    required: true, // 是否必填
    span: 12, // 栅格宽度
    options: [], // 选项 // 需要传递的数据
    min: 1, // 最小值
    max: 120,
    span: 12,
    rules: [
      { required: true, message: "请输入姓名test2", trigger: "blur" }, // 验证规则
      { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }, // 验证规则
    ],
  },
  {
    type: "number",
    label: "年龄",
    prop: "age",
    placeholder: "请输入年龄",
    min: 1, // 最小值
    max: 120,
    span: 12,
    rules: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  },
  {
    type: "radio",
    label: "性别",
    prop: "gender",
    required: true,
    span: 12,
    options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" },
      { label: "其他", value: "other" },
    ],
    rules: [{ required: true, message: "请选择性别", trigger: "change" }],
  },
  {
    type: "checkbox",
    label: "爱好",
    prop: "hobbies",
    span: 12,
    options: [
      { label: "阅读", value: "reading" },
      { label: "运动", value: "sports" },
      { label: "音乐", value: "music" },
      { label: "旅行", value: "travel" },
    ],
  },
  {
    type: "select",
    label: "城市",
    prop: "city",
    placeholder: "请选择城市",
    span: 12,
    clearable: true,
    filterable: true,
    options: [
      { label: "北京", value: "beijing" },
      { label: "上海", value: "shanghai" },
      { label: "广州", value: "guangzhou" },
      { label: "深圳", value: "shenzhen" },
    ],
  },
  {
    type: "select",
    label: "多选城市",
    prop: "multiCity",
    placeholder: "请选择多个城市",
    span: 12,
    multiple: true,
    collapseTags: true,
    clearable: true,
    options: [
      { label: "北京", value: "beijing" },
      { label: "上海", value: "shanghai" },
      { label: "广州", value: "guangzhou" },
      { label: "深圳", value: "shenzhen" },
    ],
  },
  {
    type: "cascader",
    label: "地区",
    prop: "region",
    placeholder: "请选择地区",
    span: 12,
    options: [
      {
        value: "zhinan",
        label: "指南",
        children: [
          {
            value: "shejiyuanze",
            label: "设计原则",
            children: [
              { value: "yizhi", label: "一致" },
              { value: "fankui", label: "反馈" },
            ],
          },
        ],
      },
    ],
  },
  {
    type: "date",
    label: "出生日期",
    prop: "date",
    placeholder: "请选择日期",
    span: 12,
    format: "YYYY-MM-DD",
    valueFormat: "YYYY-MM-DD",
  },
  {
    type: "date",
    label: "日期范围",
    prop: "dateRange",
    placeholder: "请选择日期范围",
    span: 12,
    dateType: "daterange",
    startPlaceholder: "开始日期",
    endPlaceholder: "结束日期",
  },
  {
    type: "time",
    label: "时间",
    prop: "time",
    placeholder: "请选择时间",
    span: 12,
  },
  {
    type: "textarea",
    label: "描述",
    prop: "description",
    placeholder: "请输入描述",
    span: 24,
    rows: 4,
    maxlength: 200,
    showWordLimit: true,
  },
  {
    type: "switch",
    label: "状态",
    prop: "status",
    activeText: "启用",
    inactiveText: "禁用",
    span: 12,
  },
  {
    type: "slider",
    label: "满意度",
    prop: "satisfaction",
    min: 0,
    max: 100,
    step: 10,
    showTooltip: true,
    span: 12,
  },
  {
    type: "rate",
    label: "评分",
    prop: "score",
    max: 10,
    showScore: true,
    span: 12,
  },
  {
    type: "color",
    label: "主题色",
    prop: "color",
    showAlpha: true,
    span: 12,
  },
  {
    type: "upload",
    label: "文件上传",
    prop: "files",
    action: "/api/upload",
    multiple: true,
    limit: 5,
    accept: ".jpg,.png,.pdf",
    listType: "text",
    buttonText: "选择文件",
    span: 24,
  },
  {
    type: "slot",
    label: "自定义字段",
    prop: "customField",
    span: 24,
    slotName: "custom-slot",
  },
];

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: "请输入姓名test1", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
};

// 提交处理
const handleSubmit = async (data) => {
  console.log("data", data);
  submitLoading.value = true;
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 2000));
    ElMessage.success("提交成功！");
  } catch (error) {
    ElMessage.error("提交失败！");
  } finally {
    submitLoading.value = false;
  }
};

// 重置处理
const handleReset = () => {
  ElMessage.info("表单已重置");
};

// 取消处理
const handleCancel = () => {
  ElMessage.info("已取消操作");
};

// 变化处理
const handleChange = (prop, value) => {};
</script>

<style scoped lang="less">
.form-example {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    color: #303133;
  }

  .custom-slot {
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
}
</style>
